<template>
	<view class="toCertification2">
		<view class="header">
			<view class="info">
					<view class="item">
						<text>真实姓名</text>
						<input class="uni-input"  type="text" maxlength="20" v-model="name" placeholder='请填写真实姓名' placeholder-style="color:#cccccc">
					</view>
				
					
					<view class="item selectAddr" >
							<text>地区</text>
							<view class="right" @click="selectAddr" >
									<text v-if='pickerText'>{{pickerText}}</text>
									<text class='default' v-if='!pickerText'>需和身份证地址一致</text>
									<view class="icon">
										<uni-icon type="arrowright" size="18" color='gray'></uni-icon>
									</view>
							</view>
							
						
					</view>
					<view class="item">
						<text>证件类型</text>
						<text>身份证</text>
					</view>
				
				<view class="item">
						<text>证件号码</text>
						<input class="uni-input"  type="idNumber" v-model="idNumber" placeholder='请填写证件号码' placeholder-style="color:#cccccc">
					</view>
			</view>
			<view class="bottom_word">
				*实名认证成功后，身份信息不可修改，请确保是本人。
			</view>
			<view class="backWrap">	
				<view class="back" @click="back">
					<uni-icon type="arrowleft" size="18"></uni-icon>
					<text>返回上一步</text>
				</view>
			</view>
			
		</view>
			
		
			
			<view class="certification_btn" @click="certification" :class="{red: name || pickerText || idNumber }">本人实名认证</view>
		
		
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue';
import cityData from '../../common/city.data.js';
var util = require('../../common/util.js');

export default {
    data() {
        return {
            idNumber: '',
            name: '',
            pickerText: '',
            cityPickerValueDefault: [0, 0, 1],
            themeColor: '#007AFF',
            frontOfId: '',
            backOfId: '',
            areaId: ''
        };
    },
    onLoad(e) {
        this.frontOfId = e.frontOfId;
        this.backOfId = e.backOfId;
        if (uni.getStorageSync('writedInfo')) {
            let writedInfo = uni.getStorageSync('writedInfo');
            console.log(writedInfo);
            (this.areaId = writedInfo.areaId),
                (this.name = writedInfo.name),
                (this.idNumber = writedInfo.idNumber),
                (this.pickerText = writedInfo.pickerText),
                (this.cityPickerValueDefault = writedInfo.cityPickerValueDefault);
        }
    },
    methods: {
        onCancel(e) {
            // console.log(e);
        },
        back() {
            let writedInfo = {
                areaId: this.areaId,
                name: this.name,
                idNumber: this.idNumber,
                pickerText: this.pickerText,
                cityPickerValueDefault: this.cityPickerValueDefault
            };
            uni.setStorageSync('writedInfo', writedInfo);
            uni.navigateBack({
                delta: 1
            });
        },
        certification() {
            if (!this.name) {
                uni.showToast({
                    title: '姓名不能为空',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (!this.pickerText) {
                uni.showToast({
                    title: '地址不能为空',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (!util.isCardNo(this.idNumber)) {
                uni.showToast({
                    title: '身份证输入不合法!',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }

            uni.showLoading({
                title: '提交中...'
            });

            util.ajax(
                'userAuth',
                {
                    areaId: this.areaId,
                    name: this.name,
                    idNumber: this.idNumber,
                    frontOfId: this.frontOfId,
                    backOfId: this.backOfId,
                    token: util.getUserToken()
                },
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        //                         uni.setStorageSync('authName', this.name);
                        //                         uni.setStorageSync('authIdNumber', this.idNumber);
                        uni.removeStorageSync('writedInfo');
                        setTimeout(() => {
                            uni.reLaunch({
                                url: './toCertification3'
                            });
                        }, 1000);
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        selectAddr() {
            this.$refs.mpvueCityPicker.show();
        },
        onConfirm(e) {
            console.log(e);
            this.pickerText = e.label;
            this.cityPickerValueDefault = e.cityPickerValueDefault;
            this.areaId = parseInt(e.cityCode);
        }
    },
    components: {
        uniIcon,
        mpvueCityPicker
    }
};
</script>

<style lang="less">
@import '../../common/icon.css';
@import '../../common/uni.css';
.uni-input {
    padding: 15upx 0;
}
.toCertification2 {
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: auto;
    .header {
        flex-direction: column;
        margin-bottom: 100upx;
        .bottom_word {
            font-size: 22upx;
            color: #999999;
            padding: 20upx 30upx;
        }
        .info {
            flex-direction: column;
            background: white;
            padding: 0 30upx;
            box-sizing: border-box;
            .item {
                flex-grow: 1;
                border-bottom: 1px solid #eeeeee;
                height: 110upx;
                align-items: center;
                text:first-child {
                    width: 24%;
                }

                .passwordInput {
                    width: 80%;
                }
            }
            .selectAddr {
                .right {
                    width: 76%;
                    justify-content: space-between;
                    align-items: center;
                    text {
                        width: 90%;
                    }
                    .default {
                        color: #cccccc;
                    }
                }
            }
        }
        .backWrap {
            justify-content: center;
            width: 100%;
            margin-top: 100upx;
            .back {
                justify-content: center;
                align-items: center;
                color: #999999;
            }
        }
    }

    .certification_btn {
        position: fixed;
        bottom: 0;
        background: rgb(204, 204, 204);
        color: white;
        font-size: 34upx;
        width: 100%;
        height: 100upx;
        justify-content: center;
        align-items: center;
        margin: 20upx auto 0;
    }
    .red {
        background: #ff1268;
    }
}
</style>
